<template>
  <div class="publish">
    <div class="title">
      <el-input placeholder="请输入帖子标题" v-model="ruleForm.title" />
      <div class="op">
        <!-- <button class="btn">存草稿</button> -->
        <button class="btn pblbtn" @click="publishBtnClick">发布</button>
      </div>
    </div>
    <Tinymce
      v-model="ruleForm.content"
      @change="handleChange"
      @imgUpload="imgUpload"
      width="100%"
    />
    <el-dialog
      v-model="publishDialogVisible"
      :title="type == 0 ? '发布帖子' : '修改帖子'"
      width="40%"
      @click="publishBtnClick"
    >
      <div class="form_content">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <el-form-item label="文章封面:" prop="cover">
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="ruleForm.cover"
                :src="QNURL + ruleForm.cover"
                class="avatar"
              />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="摘要:" prop="digest">
            <el-input
              v-model="ruleForm.digest"
              maxlength="200"
              placeholder="请输入摘要"
              show-word-limit
              rows="5"
              type="textarea"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="btns">
          <el-button type="primary" @click="comfirmClickHandle">{{
            type == 0 ? "添加" : "修改"
          }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import Tinymce from "@/components/tinymce/Tinymce.vue";
import { usePublish } from "./publishHook";
import { Plus } from "@element-plus/icons-vue";
import { QNURL } from "@/config/urlConfig";

const {
  publishDialogVisible,
  formSize,
  ruleFormRef,
  ruleForm,
  rules,
  type,
  beforeAvatarUpload,
  handleChange,
  publishBtnClick,
  comfirmClickHandle,
  imgUpload
} = usePublish();
</script>

<style lang="scss" scoped>
.publish {
  width: 100%;

  .title {
    width: 100%;
    height: 60px;
    display: flex;
    padding: 10px;

    &:deep(.el-input__wrapper) {
      box-shadow: 0 0 0 0 #fff;
      font-size: 20px;
    }

    &:deep(.el-input__inner) {
      color: #000;
      border: none;
    }

    &:deep(.is-focus) {
      box-shadow: 0 0 0 0 #fff;
    }

    .op {
      width: 200px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}

.btn {
  width: 70px;
  height: 30px;
  background-color: #fff;
  color: #1d7dfa;
  border: 1px solid #1d7dfa;
  cursor: pointer;
  border-radius: 5px;
  margin-right: 10px;
}

.pblbtn {
  background-color: #1d7dfa;
  color: #fff;
}

.form_content {
  :deep(.avatar-uploader) {
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 198px;
      height: 108px;
      transition: var(--el-transition-duration-fast);

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  :deep(.avatar-uploader) {
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
  }

  :deep(.el-icon.avatar-uploader-icon) {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
}
</style>
./publishHook
